<template>
  <div>
    <div class="breadcrumb-area pt-95 pb-95 bg-img" style="background-image:url(static/picture/banner-2.jpg);">
      <div class="container">
        <div class="breadcrumb-content text-center"><h2>Shop Page</h2>
          <ul>
            <li>
              <router-link :to="{name:'index'}">home</router-link></li>
             <li class="active">{{categoryId}}</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="shop-area pt-100 pb-100 gray-bg">
      <div class="container">
        <div class="row flex-row-reverse">
          <div class="col-lg-9">
            <!--              商品列表-->
            <div class="grid-list-product-wrapper">
              <div class="product-view product-grid">

                <div class="row">

                  <div class="product-width col-lg-6 col-xl-4 col-md-6 col-sm-6" v-for="product in productList" >
                    <div class="product-wrapper mb-10">
                      <div class="product-img">
                        <router-link :to="{name:'viewProduct',query:{productId:product.productId,catId:product.categoryId}}">
                          <img :src="product.pImage" alt="">
                        </router-link>
                        <div class="product-action-wishlist">
                          <a title="Wishlist" href="#">
                            <i class="ti-heart"></i>
                          </a>
                        </div>
                      </div>
                        <div class="product-content">
                        <h4>
                          <router-link :to="{name:'viewProduct',query:{productId:product.productId,catId:product.categoryId}}">
                            {{ product.pName }}
                          </router-link>
                        </h4>
                        <p>{{product.pDescn}}</p>
                      </div>

                    </div>
                  </div></div>
                <!--翻页-->
                <div class="pagination-style text-center mt-10">
                  <ul>
                    <li><a href="#"><i class="icon-arrow-left"></i></a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a class="active" href="#"><i class="icon-arrow-right"></i></a></li>
                  </ul>
                </div>
                <!--翻页-->
              </div>
            </div>

          </div>

          <div class="col-lg-3">

            <div class="shop-sidebar">
              <!--搜索框-->
              <div class="shop-widget">
                <h4 class="shop-sidebar-title">Search Products</h4>
                <div class="shop-search mt-25 mb-50">
                  <form class="shop-search-form"><input type="text" placeholder="Find a product">
                    <button type="submit"><i class="icon-magnifier"></i></button>
                  </form>
                </div>
              </div>
              <!--搜索框-->
              <!--价位选择-->
              <div class="shop-widget">
                <h4 class="shop-sidebar-title">Filter By Price</h4>
                <div class="price_filter mt-25">
                  <div id="slider-range"></div>
                  <div class="price_slider_amount">
                    <div class="label-input">
                      <label>price :</label>
                      <input type="text" id="amount" name="price" placeholder="Add Your Price">
                    </div>
                    <button type="button">Filter</button>
                  </div>
                </div>
              </div>
              <!--价位选择-->
              <!--侧边栏-->
              <div class="shop-widget mt-50"><h4 class="shop-sidebar-title">Category</h4>
                <div class="shop-list-style mt-20">
                  <ul>
                    <li><a @click="sortItem('BIRDS')">Birds</a></li>
                    <li><a @click="sortItem('CATS')">Cats</a></li>
                    <li><a @click="sortItem('DOGS')">Dogs</a></li>
                    <li><a @click="sortItem('FISHES')">Fishes</a></li>
                    <li><a @click="sortItem('REPTILES')">Reptiles</a></li>

                  </ul>
                </div>
              </div>
              <!--侧边栏-->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import viewCatalog from "../../../static/js/pet/viewcatalog.js";
export default {
  ...viewCatalog
}


</script>

<style scoped>
@import "../../../static/css/bootstrap.min.css";
@import "../../../static/css/animate.css";
@import "../../../static/css/simple-line-icons.css";
@import "../../../static/css/themify-icons.css";
@import "../../../static/css/owl.carousel.min.css";
@import "../../../static/css/slick.css";
@import "../../../static/css/meanmenu.min.css";
@import "../../../static/css/style2.css";

@import "../../../static/css/responsive.css";
</style>
